<template>
  <div class="icon-wrapper">
    <svg
      :width="size"
      :height="size"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      class="animated-icon"
    >
      <!-- 背景圆圈 -->
      <circle cx="100" cy="700" r="60" fill="#606266" class="animated-move1 animated-move" />
      <!-- 动画圆圈 -->
      <circle cx="400" cy="700" r="60" fill="#606266" class="animated-move2 animated-move" />
      <!-- 感叹号的竖线 -->
      <!-- 感叹号的点 -->
      <circle cx="700" cy="700" r="60" fill="#606266" class="animated-move1 animated-move" />
    </svg>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  size: {
    type: String,
    default: '128px'
  }
})
</script>

<style scoped>
.animated-icon {
  display: block;
  margin: auto;
}

.icon-wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}
.animated-move {
  animation: fade 0.8s ease-in-out alternate infinite;
}
.animated-move1 {
  animation-delay: -0.4s;
}
.animated-move2 {
  animation-delay: -0.2s;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
